<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>同事
    <ul>
        <li>柳传志</li>
        <li>马化腾</li>
        <li>刘强东</li>
    </ul>
    </li>

<li>亲戚
    <ul>
        <li>习大大</li>
        <li>老干妈</li>
        <li>马大姐</li>
    </ul>
</li>
<li>女友们
    <ul>
        <li>景甜</li>
        <li>刘亦菲</li>
        <li>张敏</li>
    </ul>
</li>
</ul>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //得到第二层的ul并隐藏
    $("li>ul").hide();
    //动态事件绑定 给所有的第一层的li添加点击事件
   $("body>ul>li").click(function () {
        $(this).children().toggle();
   });
        //$(this)代表事件源（触发事件的元素对象）
        //alert($(this).text());
        //得到点击li里面的ul并让其切换显示状态

</script>
</body>
</html>